<template>
  <div
    v-if="!loading"
    ref="newsListRef"
    class="vc-data-table"
    :style="visual.parseStyle(compStyle)"
  >
    <el-table
      ref="dataTable"
      v-bind="tableOptions"
      :data="dataList"
      class="vc-data-table-table"
      :style="tableStyle"
    >
      <el-table-column
        v-if="showCheckbox"
        header-align="center"
        align="center"
        type="selection"
        width="55"
      />
      <el-table-column
        v-if="showIndex"
        header-align="center"
        align="center"
        type="index"
        width="55"
        label="序号"
      />
      <el-table-column
        v-for="(column, index) in columnList"
        :key="index"
        v-bind="column.options"
      >
        <template #default="{ row }">
          <div v-if="column.fieldType === '日期'" :style="column.style">
            {{row[column.prop] ? date.formatLongDate(row[column.prop], column.format) : ''}}
          </div>
          <div v-else-if="column.fieldType === '字典'" :style="column.style">
            <cc-show-dict :dictCode="column.dictCode" :dictValue="row[column.prop]" />
          </div>
          <div v-else-if="column.fieldType === '数字'" :style="column.style">
            {{tool.formatNumber(row[column.prop], column.point)}}
          </div>
          <div v-else-if="column.fieldType === '图片'" :style="column.style">
            <el-image
              v-if="row[column.prop]"
              style="display: inline-table"
              preview-teleported
              hide-on-click-modal
              :src="imageUrl + row[column.prop]"
              :preview-src-list="[imageUrl + row[column.prop]]"
              fit="scale-down"
            />
          </div>
          <span
            v-else
            class="overflow-ellipsis"
            :style="column.style"
          >{{row[column.prop]}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="pagination" class="cc-pagination">
      <el-pagination
        :layout="`total, prev, pager, next,
          ${showJumper ? 'jumper,' : ''}
          ${showSizes ? 'sizes' : ''}`"
        :current-page="queryInfo.pageNumber"
        :page-sizes="[10, 20, 50, 100, 500]"
        :page-size="queryInfo.pageSize"
        :total="dataTotal"
        @current-change="() => {}"
        @size-change="() => {}"
      />
    </div>
  </div>
</template>

<script setup>
import {ref, watch, nextTick, onMounted} from 'vue';
import visual from "@/visual/js/visual";
import date from "@/utils/date";
import tool from "@/utils/tool";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const dataList = ref([{}]);
const loading = ref(true);
const showCheckbox = ref(false);
const showIndex = ref(false);
const tableStyle = ref('');
const tableOptions = ref({});
const columnList = ref([]);
const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
const showJumper = ref(false);
const showSizes = ref(false);
const pagination = ref(false);
const queryInfo = ref({
  pageNumber: 1,
  pageSize: 10
});
const dataTotal = ref(100);

const init = async() => {
  loading.value = true;
  const compData = props.node.compData || {};
  if (compData.dataSourceType === '') {
    compData.dataSourceType = '静态数据';
  }
  pagination.value = compData.dataPage || false;
  queryInfo.value.pageNumber = 1;
  queryInfo.value.pageSize = compData.dataPageSize || 10;

  showCheckbox.value = (props.compStyle || {})['header.checkbox'] || false;
  showIndex.value = (props.compStyle || {})['header.index'] || false;
  showJumper.value = compData.showJumper || false;
  showSizes.value = compData.showSizes || false;
  initTableStyle();
  initTableOptions();
  initColumnList();
  await nextTick(() => loading.value = false);
};

const initTableStyle = () => {
  const compStyle = props.compStyle || {};
  tableStyle.value = '';
  if (compStyle['backgroundColor']) {
    tableStyle.value += '--data-table-bg-color: ' + (compStyle['backgroundColor'] || 'transparent') + ';';
  }
  if (compStyle['hoverColor']) {
    tableStyle.value += '--data-table-tr-hover-bg-color: ' + compStyle['hoverColor'] + ';';
  }
  if (compStyle['header.color']) {
    tableStyle.value += '--data-table-header-color: ' + compStyle['header.color'] + ';';
  }
  if (compStyle['header.fontSize']) {
    tableStyle.value += '--data-table-header-font-size: ' + compStyle['header.fontSize'] + 'px;';
  }
  if (compStyle['header.fontWeight']) {
    tableStyle.value += '--data-table-header-font-weight: ' + compStyle['header.fontWeight'] + ';';
  }
  if (compStyle['header.bgColor']) {
    tableStyle.value += '--data-table-header-bg-color: ' + compStyle['header.bgColor'] + ';';
  }
  tableStyle.value += '--data-table-header-padding: '
    + (compStyle['header.padding'] || '10,5,10,5').split(',').join('px ') + 'px;';
  if (compStyle['header.borderColor']) {
    tableStyle.value += '--table-border-color: ' + (compStyle['header.borderColor'] || 'inherit') + ';';
  }
  tableStyle.value += '--data-table-body-padding: '
    + (compStyle['body.padding'] || '5,5,5,5').split(',').join('px ') + 'px;';
  if (compStyle['body.border']) {
    tableStyle.value += '--data-table-body-border: 1px solid ' + compStyle['body.border.color'] + ';';
  } else {
    tableStyle.value += '--data-table-body-border: none;';
  }
};

const initTableOptions = () => {
  const compStyle = props.compStyle || {};
  const options = {};
  options.width = compStyle['width'] || '100%';
  options.height = compStyle['height'] || '100%';
  options.border = compStyle['border'] || false;
  options.stripe = compStyle['stripe'] || false;
  tableOptions.value = options;
};

const initColumnList = () => {
  const compStyle = props.compStyle || {};
  const list = [];
  (compStyle.columnList || []).forEach(item => {
    const column = {};

    column.prop = item.prop;
    column.dictCode = item.dictCode || '';
    column.fieldType = item.fieldType;
    column.point = item.point;
    column.format = item.format;

    const options = {};
    if (item.autoWidth) {
      options.minWidth = item.width || 10;
    } else {
      options.width = item.width || 10;
    }
    options.sortable = item.sortable ? 'custom' : false;
    options.label = item.label;
    options.headerAlign = item.headerAlign;
    options.align = item.align;
    options.className = item.wrap ? 'wrap' : 'nowrap';
    column.options = options;

    column.style = visual.parseFontStyle(item);
    list.push(column);
  });
  columnList.value = list;
};

const loadDataList = async() => {
  loading.value = true;
  const page = await visual.loadData(props.compData, {}, getData(), currNode.value) || {};
  dataTotal.value = page.totalRecord || 0;
  dataList.value = page.data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList.value);
  await nextTick(() => loading.value = false);
};

const getData = () => {
  return {
    ...queryInfo.value
  };
};

watch(() => props.compStyle, () => {
  init();
}, {deep: true});

watch(() => props.node.compData, async() => {
  loading.value = true;
  await init();
  await loadDataList();
  await nextTick(() => loading.value = false);
}, { deep: true });

onMounted(async() => {
  await init();
  await loadDataList();
});
</script>

<style scoped lang="scss">
:deep(.el-table) {
  background-color: var(--data-table-bg-color)!important;
  th {
    background-color: var(--data-table-bg-color)!important;
  }
  tr {
    background-color: var(--data-table-bg-color)!important;
  }
  td {
    background-color: var(--data-table-bg-color)!important;
  }
  tr:hover td {
    background-color: var(--data-table-tr-hover-bg-color)!important;
  }
}
:deep(.el-table::before),
:deep(.el-table__inner-wrapper:before) {
  height: 0!important;
}
:deep(.el-table td),
:deep(.el-table th.is-leaf) {
  border-bottom: var(--data-table-body-border)!important;
}
:deep(.el-table th.el-table__cell) {
  background-color: var(--data-table-header-bg-color)!important;
}
:deep(.el-table th.el-table__cell .cell) {
  padding: var(--data-table-header-padding)!important;
}
:deep(.el-table th.el-table__cell .cell) {
  color: var(--data-table-header-color)!important;
}
:deep(.el-table th .cell) {
  font-size: var(--data-table-header-font-size, '14px')!important;
  font-weight: var(--data-table-header-font-weight)!important;
}
:deep(.el-table td .cell) {
  height: unset!important;
  line-height: unset!important;
  padding: var(--data-table-body-padding)!important;
}
.vc-data-table-table .overflow-ellipsis {
  height: unset!important;
  white-space: pre-wrap;
}
.vc-data-table-table .wrap .overflow-ellipsis {
  height: unset!important;
  white-space: pre-wrap;
}
.cc-pagination {
  margin-top: 5px;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>